<template>
	<view>
		<view class="form-box">
			<u--form labelWidth="70" :labelStyle="{color:'rgba(143,146,161,1)'}" labelPosition="left" :model="form"
				:rules="rules" ref="uForm">
				<u-form-item labelWidth="70" label="头像" prop="avatar" borderBottom>
					<u-avatar @click="uploadAvadar" :src="avatar"></u-avatar>
				</u-form-item>
				<u-form-item labelWidth="70" label="姓名" prop="nickname" borderBottom>
					<u--input placeholder="请输入姓名" v-model="form.nickname" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" label="性别" prop="gender" borderBottom>
					<u-radio-group v-model="form.gender">
						<u-radio shape="circle" name="1" label="男"></u-radio>
						<u-radio shape="circle" name="0" label="女"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="70" label="手机号" prop="mobile" borderBottom>
					<u--input placeholder="请输入手机号" v-model="form.mobile" border="none">
					</u--input>
				</u-form-item>
				<u-form-item @click="dateShow=!dateShow" labelWidth="70" label="生日" prop="birthday" borderBottom>
					{{form.birthday}}
				</u-form-item>
				<u-form-item labelWidth="70" label="留言" prop="bio">
					<u--input placeholder="请输入留言" v-model="form.bio" border="none">
					</u--input>
				</u-form-item>

				<view class="btn-box">
					<u-button @click="submit" type="primary" style="margin-top: 10px;" text="提交保存"></u-button>
				</view>
			</u--form>
		</view>
		<u-datetime-picker :show="dateShow" v-model="value1" mode="date" @confirm="dateConfirm" @cancel="dateCancel" :maxDate="maxDate" :minDate="minDate"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow:false,
				minDate:0,
				maxDate:Number(new Date()),
				value1: Number(new Date()),
				avatar:'',
				form: {
					avatar:'',
					nickname: '',
					gender: '0',
					mobile: '',
					birthday: '',
					bio: '',
				},
				rules: {
					'nickname': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					'mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}

					],
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'repassword': [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.form.password == this.form.repassword;
							},
							message: '两次手机号码不一致',
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onLoad(){
			if(!this.vuex_token){
				uni.redirectTo({
					url:'/pages/public/login'
				})
			}
			this.avatar='http://localhost:8080/'+this.vuex_user.avatar;
			this.form.avatar=this.vuex_user.avatar;
			this.form.nickname=this.vuex_user.nickname;
			this.form.gender=''+this.vuex_user.gender;
			this.form.mobile=this.vuex_user.mobile;
			this.form.birthday=this.vuex_user.birthday;
			if(this.vuex_user.bio==null||this.vuex_user.bio==''){
				this.form.bio='无';
			}else{
				this.form.bio=this.vuex_user.bio;
			}
		},
		methods: {
			submit(){
				let that=this
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast(res.msg)
					uni.$u.http.post('/user/profile', this.form).then((res) => {
						uni.$u.toast(res.msg)
						if (res.code == 1) {
							that.$u.vuex('vuex_user', res.data)
						}
						console.log(res)
					}).catch((e) => {
						// console.log(e)
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			},
			uploadAvadar(){
				let that=this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.$u.http.upload('/common/upload', {
						    filePath:res.tempFilePaths[0], // 要上传文件资源的路径。
						}).then(res => {
							// 返回的res.data 已经进行JSON.parse
							console.log(res)
							that.avatar=res.data.fullurl;
							that.form.avatar=res.data.url;
						}).catch(err => {
						
						})
					}
				});
			},
			dateConfirm(e){
				console.log(e)
				this.form.birthday=uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.dateShow=false;
			},
			dateCancel(){
				this.dateShow=false;
			},
		}
	}
</script>

<style lang="scss">
	.form-box {
		padding: 20px;
	}

	.btn-box {
		padding-top: 40px;
	}
</style>